import { Divider } from 'antd';
import React from 'react';
import { useState, useEffect } from 'react';
import styles from './setsafe.less'

const Setsafe: React.FC = (props) => {
  const [phone, setphone] = useState("")

  useEffect(() => {
    setphone("138****8293")
    return () => {

    }
  }, [])

  return (
    <div>
      <div className={styles.warp}>
        <div>
          <h4>账户密码</h4>
          <p>当前密码强度：：强</p>
        </div>
        <div><a>修改</a></div>
      </div>
      <Divider />
      <div className={styles.warp}>
        <div>
          <h4>密保手机</h4>
          <p>已绑定手机：：{phone}</p>
        </div>
        <div><a>修改</a></div>
      </div>
      <Divider />
      <div className={styles.warp}>
        <div>
          <h4>密保问题</h4>
          <p>未设置密保问题，密保问题可有效保护账户安全</p>
        </div>
        <div><a>设置</a></div>
      </div>
      <Divider />
      <div className={styles.warp}>
        <div>
          <h4>备用邮箱</h4>
          <p>已绑定邮箱：：lan***g@qq.com</p>
        </div>
        <div><a>修改</a></div>
      </div>
      <Divider />
      <div className={styles.warp}>
        <div>
          <h4>MFA 设备</h4>
          <p>未绑定 MFA 设备，绑定后，可以进行二次确认</p>
        </div>
        <div><a>绑定</a></div>
      </div>
      <Divider />
    </div>
  )
}

export default Setsafe